<script setup>
import { ref } from 'vue'
import { request } from '@/utils/request'
const file = ref(null)
const FILE_SIZE = 2 * 1024 * 1024
const handlerFile = () => {
  if (file.value) {
    file.value.click()
  }
}
const fileObj = ref({})
const data = ref([])
const uploadFile = (e) => {
  fileObj.value = e.target.files[0]
  if (fileObj.value) {
    // 判断文件大小，如果文件过大，则需要进行切片上传
    if (fileObj.value.size > FILE_SIZE) {
      let chunkList = []
      chunkList = createFileSplice(fileObj.value)
      // 给分片后的数据添加一些属性：大文件名称，分片的文件，分片的文件名
      // 如果函数返回中返回一个对象，且只有一行时则需要使用()包起来
      data.value = chunkList.map((file, index) => ({
        file,
        fileName: fileObj.value.name,
        chunkName: fileObj.value.name + '-' + index
      }))
      // 将分片后的数据数组进行添加请求函数
      requestList(data.value)
    } else {
      // 小文件直接上传
    }
  }
}
// 创建文件切片
const createFileSplice = (file, size = FILE_SIZE) => {
  const chunkList = []
  let cur = 0
  while (cur <= file.size) {
    chunkList.push({ file: file.slice(cur, cur + size) })
    cur += size
  }
  return chunkList
}
// 创建请求函数
const requestList = async (list) => {
  const requestList = list
    .map(({ file, fileName, chunkName }) => {
      const fd = new FormData()
      fd.append('file', file)
      fd.append('fileName', fileName)
      fd.append('chunkName', chunkName)
      return { fd }
    })
    .map(({ fd }) =>
      request({
        url: '上传切片的接口地址',
        method: 'POST',
        data: fd
      })
    )
  console.log(requestList)
  // 切片全部请求上传成功之后进行合并切片
  await Promise.all(requestList)
  chunkMerge()
}
// 创建文件切片合并
const chunkMerge = () => {
  request({
    url: '合并切片的接口地址',
    method: 'POST',
    data: JSON.stringify({
      // fileObj.name  根据后端需要传的参数进行填写
    })
  })
}
</script>
<template>
  <input type="file" hidden @change="uploadFile" ref="file" />
  <button @click="handlerFile">点击上传</button>
</template>
<style></style>
